<template>
	<scroll-view class="list-scroll" scroll-y @scrolltolower="getList()" @refresherrefresh="getList(true)"
		:refresher-enabled="true" :refresher-triggered="refresherTriggered">
		<!-- 企业信息 -->
		<view style="padding: 26rpx 0 0;">
			<view v-for="(item,index) in list" :key="index">
				<slot :item="item" />
			</view>
		</view>
		<view class="get-more" style="padding-top:80px" v-show="list.length==0&&!loading">暂无数据</view>
		<view class="get-more" v-show="andMore">
			加载中<view class="uni-loading"></view>
		</view>
		<view class="get-more" v-show="!andMore">
			<text>没有更多了</text>
		</view>
	</scroll-view>
</template>


<script>
	export default {
		props: {
			queryList: {
				type: Function,
			},
			formData: {
				type: Object,
				default () {
					return {}
				}
			},
			pageSize: {
				type: Number,
				default: 10,
			}
		},
		data() {
			return {
				refresherTriggered: false,
				loading: false,
				list: [],
				pages: {
					size: this.pageSize, // 每次加载的数量
					current: 1, // 记录当前页
					total: '', // 记录总数
				}
			};
		},
		computed: {
			andMore() {
				// 计算是否还有更多
				return this.pages.total !== this.list.length;
			}
		},
		mounted() {
			this.getList(true);
		},
		methods: {
			// 监听点击右上角事件
			onNavigationBarButtonTap(e) {
				this.$goBack('../knowledge/index', 2);
			},
			itemClick(item) {
				this.$goBack('../knowledge/knowledge_detail?id=' + item.id, 2);
			},
			// 加载，刷新
			getList(isRefresh) {
				if(this.loading){
					return;
				}
				if (isRefresh) {
					this.pages.current = 1;
					this.list = [];
					this.refresherTriggered = true;
				} else {
					if (this.andMore) {
						this.pages.current++;
					} else {
						return;
					}
				}
				this.loading = true;

				const formData = {
					...this.formData,
					...this.pages
				}
				this.queryList(formData).then(res => {
					console.log(res);
					this.refresherTriggered = false;
					this.loading = false;
					const resData = res.data.data;
					this.list.push(...resData.records);
					this.pages.total = resData.total;
				}).catch(() => {
					this.loading = false;
					if (!isRefresh) {
						this.pages.current--;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@keyframes myMove {
		from {
			transform: rotate(0)
		}

		to {
			transform: rotate(360deg);
		}
	}
	.list-scroll ::v-deep {
		height: 100vh;

	}

	.get-more {
		padding: 20rpx;
		text-align: center;
		font-size: 28rpx;

		.uni-loading {
			vertical-align: middle;
			margin-left: 20rpx;
			font-size: 40rpx;
			animation: myMove 2s linear infinite;
		}
	}
</style>
